<template>
    <main-wrap :noFixed="true" bodyBg="none" :bodyStyle="{height:'100%',overflow: 'hidden'}">
        <div class="allNetWrap">
            <ul class="anwScroll anw-item-list scolScrollbar">
                <li>
                    <div class="title" v-t="'capitalRank.text4'">Transaction Income</div>
                    <div class="anw-table-tr trHeader">
                        <div class="item-td w0" v-t="'capitalRank.text1'">
                            Rank
                        </div>
                        <div class="item-td w1" v-t="'capitalRank.text2'">
                            Name
                        </div>
                        <div class="item-td w2" v-t="'capitalRank.text3'">
                            Amount
                        </div>
                    </div>
                    <template v-if="data1 && data1.length>0">
                        <div class="rankTableBox">
                            <template v-for="dt in data1" :key="dt.sequence">
                                <div class="anw-table-tr">
                                    <div class="item-td w0">
                                        <em :class="`mc${dt.sequence}`">{{dt.sequence}}</em>
                                    </div>
                                    <div class="item-td w1 name">
                                        <div class="imgBox"><Image :url='dt.headImage'/></div>
                                        <p>{{dt.userName}}</p>
                                    </div>
                                    <div class="item-td w2">
                                        {{dt.amount.decimalFourString}}
                                    </div>
                                </div>
                            </template>
                        </div>
                        <div class="rankTableBox myRankBox">
                            <div class="anw-table-tr">
                                <div class="item-td w0">
                                    <em>{{myTradeRank.sequence || '-'}}</em>
                                </div>
                                <div class="item-td w1 name">
                                    <div class="imgBox"><Image :url='myTradeRank.headImage'/></div>
                                    <p>{{myTradeRank.userName}}</p>
                                </div>
                                <div class="item-td w2">
                                    {{myTradeRank.amount?myTradeRank.amount.decimalFourString:'-'}}
                                </div>
                            </div>
                        </div>
                    </template>
                    <div v-else class="rankTableBox">
                        <p class="nodata">No Data</p>
                    </div>
                    
                </li>
                <li>
                    <div class="title" v-t="'capitalRank.text5'">Advertising Income</div>
                    <div class="anw-table-tr trHeader">
                        <div class="item-td w0" v-t="'capitalRank.text1'">
                            Rank
                        </div>
                        <div class="item-td w1" v-t="'capitalRank.text2'">
                            Name
                        </div>
                        <div class="item-td w2" v-t="'capitalRank.text3'">
                            Amount
                        </div>
                    </div>
                    <div class="rankTableBox">
                        <template v-for="dt in data2" :key="dt.rankNum">
                            <div class="anw-table-tr">
                                <div class="item-td w0">
                                    <em :class="`mc${dt.rankNum}`">{{dt.rankNum}}</em>
                                </div>
                                <div class="item-td w1 name">
                                    <div class="imgBox"><Image :url='dt.headImage'/></div>
                                    <p>{{dt.userName}}</p>
                                </div>
                                <div class="item-td w2">
                                    {{dt.allBonus.decimalFourString}}
                                </div>
                            </div>
                        </template>
                    </div>
                    <div class="rankTableBox myRankBox" v-if="myAdsIncomeRank">
                        <div class="anw-table-tr">
                            <div class="item-td w0">
                                <em>{{myAdsIncomeRank.rankNum || '-'}}</em>
                            </div>
                            <div class="item-td w1 name">
                                <div class="imgBox"><Image :url='userDetail.headImage'/></div>
                                <p>{{userDetail.userName}}</p>
                            </div>
                            <div class="item-td w2">
                                {{myAdsIncomeRank.allBonus?myAdsIncomeRank.allBonus.decimalFourString:'-'}}
                            </div>
                        </div>
                    </div>
                </li>
                <li>
                    <div class="title" v-t="'capitalRank.text6'">Operation Placement Income</div>
                    <div class="anw-table-tr trHeader">
                        <div class="item-td w0" v-t="'capitalRank.text1'">
                            Rank
                        </div>
                        <div class="item-td w1" v-t="'capitalRank.text2'">
                            Name
                        </div>
                        <div class="item-td w2" v-t="'capitalRank.text3'">
                            Amount
                        </div>
                    </div>
                    <div class="rankTableBox">
                        <p class="nodata">No Data</p>
                    </div>
                </li>
            </ul>  
        </div>
    </main-wrap>
</template>

<script>
import {reactive,toRefs, onMounted,computed } from 'vue'
import { useStore } from 'vuex'
import mainWrap from '@/components/mainWrap.vue'
import {toast} from '@/utils/common.js'
import Image from '@/components/image.vue'
import { useI18n } from 'vue-i18n'

export default {
    components:{
        mainWrap,
        Image
    },
    setup(){
        const store = useStore()
        const {t} = useI18n()

        const state = reactive({
            userInfo:computed(()=>store.state.base.userInfo),
            data1:[],
            data2:[],
            userDetail:{},
            myAdsIncomeRank:{},
            myTradeRank:{}
        })

        onMounted(()=>{
            getUserInfo()
            get_global_trade_income_rank()
            get_global_ads_income_rank()  // 全网排行-广告收入排行
            get_my_ads_income_rank() // 我的广告收入排行名次
        })

        const getUserInfo = async()=>{
            const res = await store.dispatch('base/get_user_info',state.userInfo.walletAddress) // 获取用户信息
            state.userDetail = res.data || {}
        }

        // 广告收入排行
        const get_global_trade_income_rank = ()=>{
            store.dispatch('capital/get_rank_trade',{
                walletAddress:state.userInfo.walletAddress
            }).then(res=>{
                if(res.data && res.data.length>0){
                    state.myTradeRank = JSON.parse(JSON.stringify(res.data[res.data.length-1])) 
                   // if(res.data[res.data.length-1].walletAddress.toLowerCase()==state.userInfo.walletAddress.toLowerCase()){
                        // 最后一条是自己，则删除
                        res.data.splice(-1,1)
                        console.log("myTradeRank:",state.myTradeRank)
                        state.data1 = res.data
                   // }
                }else{
                    state.data1 = []
                }
            })
        }

        // 广告收入排行
        const get_global_ads_income_rank = ()=>{
            store.dispatch('ad/get_global_ads_income_rank',{
                limit: 100,
                orderField: "",
                orderType: "",
                page: 1,
                walletAddress:state.userInfo.walletAddress
            }).then(res=>{
                state.data2 = res.data || []
            })
        }

        // 我的广告收入排行名次
        const get_my_ads_income_rank = ()=>{
            store.dispatch('ad/get_my_ads_income_rank',state.userInfo.walletAddress).then(res=>{
                state.myAdsIncomeRank = res.data || ''
            })
        }  

        return {
            ...toRefs(state)
        }
    }
}
</script>

<style lang="scss" scoped>
    .allNetWrap{
        height: 100%;
        width: 100%;
        overflow: hidden;
        padding: 30px 30px 30px 0;
        .anwScroll{
            width: 100%;
            height: 100%;
            overflow-x: auto;
        }
        .anw-item-list{
            display: flex;
            list-style: none;
            padding: 0;
            margin: 0;
            li{
                display: flex;
                flex-flow: column;
                flex: 1;
                min-width: 450px;
                padding: 30px 20px 40px 20px;
                background: url(/images/capital/rk1.png) left top no-repeat;
                background-size:100% 100%;
                &+li{
                    margin-left: 20px;
                }
                .rankTableBox{
                    flex: 1;
                    overflow: hidden;
                    overflow-y: auto;
                    &.myRankBox{
                        flex: none;
                        overflow: hidden;
                        background: rgba(12,132,217,0.5);
                    }
                    .nodata{
                        height: 100%;
                        width: 100%;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                    }
                }
                .title{
                    font-family: Poppins-SemiBold Italic, Poppins;
                    font-weight: normal;
                    color: #C5FAFF;
                    text-shadow: 0px 0px 6px #07A3FB;
                    //-webkit-background-clip: text;
                    //-webkit-text-fill-color: transparent;
                    text-align: center;
                    font-size: 26px;
                    line-height: 40px;
                    height: 40px;
                    margin: 0 0 5px 0;
                }
                .anw-table-tr{
                    display: flex;
                    font-family: Inter-Medium, Inter;
                    font-weight: 500;
                    color: #FFFFFF;
                    font-size: 22px;
                    &.trHeader{
                        color: #67F8FF;
                        background: rgba(12,132,217,0.5000);
                        .item-td{
                            height: 60px;
                        }
                    }
                    .item-td{
                        display: flex;
                        align-items: center;
                        height: 60px;
                        line-height: 60px;
                        &.name{
                            display: flex;
                            flex-shrink: 0;
                            width: 0;
                            p{
                                flex: 1;
                                overflow: hidden;
                                text-overflow: ellipsis;
                                white-space: nowrap;
                                
                            }
                        }
                        .imgBox{
                            width: 40px;
                            height: 40px;
                            border-radius:5px ;
                            overflow: hidden;
                            margin: 0 10px 0 0;
                        }
                        &.w0{
                            justify-content: center;
                            width: 80px;
                            em{
                                display: flex;
                                font-style: normal;
                                width: 40px;
                                height: 47px;
                                line-height: 47px;
                                justify-content: center;
                                align-items: center;
                                flex-shrink: 0;
                                text-align: center;
                                font-size: 22px;
                                background: url(/images/flowRanking/bs.png) left center no-repeat;
                                background-size: 100% 100%;
                                &.mc1{
                                    background-image: url(/images/flowRanking/one.png);
                                }
                                &.mc2{
                                    background-image: url(/images/flowRanking/two.png);
                                }
                                &.mc3{
                                    background-image: url(/images/flowRanking/three.png);
                                }
                            }
                        }
                        &.w1{
                            flex: 1;
                            padding: 0 0 0 15px;
                        }
                        &.w2{
                            justify-content: center;
                            width: 190px;
                        }
                    }
                }
            }
            
        }
    }
</style>